<template>
  <div class="count-down">
    <!-- <div class="times iconfont">
      {{drawTime}}
    </div> -->
    <div class="hours item">
      <div class="high number">
        <i class="iconfont icondigital_10 bg" :style="'fontSize:' + fontSize + 'px' "></i>
        <i class="iconfont active" :class="highIconClass" :style="'fontSize:' + fontSize + 'px' "></i>
      </div>
      <div class="low number">
        <i class="iconfont icondigital_10 bg" :style="'fontSize:' + fontSize + 'px' "></i>
        <i class="iconfont active" :class="lowIconClass" :style="'fontSize:' + fontSize + 'px' "></i>
      </div>
    </div>
    
  </div> 
</template>

<script>
const numbers = ['icondigital_4', 'icondigital_2', 'icondigital_6', 'icondigital_3', 'icondigital_9', 'icondigital_7', 'icondigital_8', 'icondigital_5', 'icondigital_10', 'icondigital_']
import { formatCountDown } from '@/assets/js/util'
export default {
  props: {
    timeStamp: {
      type: Number,
      default: 0
    },
    numberStr: {
      type: String,
      default: '00'
    },
    fontSize: {
      type: Number,
      default: 24
    }
  },
  created() {
    
  },
  computed: {
    highIconClass() {
      let index = parseInt(this.numberStr.split('')[0])
      // console.log(numbers[index])
      return numbers[index]
    },
    lowIconClass() {
      let index = parseInt(this.numberStr.split('')[1])
      // console.log(index)
      return numbers[index]
    },
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl'
    .count-down 
      display flex 
      .item  
        display flex 
        &.comma 
          .iconfont 
            width 10px
        .number 
          position relative 
          // border 1px solid green
          &.low 
            margin-left -4px 
          .bg 
            color #f5cece 
          .active 
            color $color-theme-red 
            position absolute 
            left 0
            top 0
</style>